<template>
  <div class="wrap">

    <div class="autoplay" :class="isPlay ? 'rotate' : ''" @click="musicControl()" ref="music">
      <audio id="musicBg" ref="audio" preload loop :src="musicsrc"></audio>
    </div>

      <div @click="handlePage">
        <div class="swiper-container swiper-father-container">
          <div class="swiper-wrapper">

            <div v-for="(item, index) in menuList" :key="index" class="swiper-slide">
              <component
                :is="item.components"
                :coverData="coverData"
                :reportData="reportData"
                :pageIndex="pageIndex"
                :glc="glc"
                :year="year"
              />
            </div>

          </div>
        </div>

        <ChartAni
          v-if="[4, 5, 7, 8].includes(pageIndex) && !loading"
          :pageIndex="pageIndex"
          :reportData="reportData"
        />
      </div>

      <div thumbsSlider="" class="swiper swiper-thumbs" :class="pageIndex === 0 ? 'page-cover' : ''">
        <div class="swiper-wrapper">
          <div v-for="(item, index) in menuList" :key="index" class="swiper-slide swiper-slide-thumb">
            <div class="thumbs-icon">
              <img :src="require(`@/assets/images/${item.icon}`)" />
            </div>
          </div>
        </div>
      </div>

      <Loading v-if="loading" />

  </div>
</template>

<script>
import $http from '@/utils/http'
import Loading from '@/components/loading'
import Swiper from 'swiper'
import PageCover from './pages/pageCover'
import PageBorrowBook from './pages/pageBorrowBook'
import PageBorrowFirst from './pages/pageBorrowFirst'
import PageBorrowMonth from './pages/pageBorrowMonth'
import PageBorrowWeek from './pages/pageBorrowWeek'
import PageBookAuthor from './pages/pageBookAuthor'
import PagePrice from './pages/pagePrice'
import PageLoveClassify from './pages/pageLoveClassify'
import PageReadRank from './pages/pageReadRank'
import PageRecommend from './pages/pageRecommend'
import PageLast from './pages/pageLast'
import ChartAni from './pages/ChartAni'
// import { isBlank } from '@/utils/dataType'
export default {
  name: 'Home',
  components: {
    PageCover,
    PageBorrowBook,
    PageBorrowFirst,
    PageBorrowMonth,
    PageBorrowWeek,
    PageBookAuthor,
    PagePrice,
    PageLoveClassify,
    PageReadRank,
    PageRecommend,
    PageLast,
    ChartAni,
    Loading
  },
  data () {
    return {
      loading: false,
      mySwiper: null,
      thumbSwiper: null,
      pageIndex: 0,
      menuList: [
        {
          icon: 'm1.png',
          components: PageCover
        },
        {
          icon: 'm2.png',
          components: PageBorrowBook
        },
        {
          icon: 'm5.png',
          components: PageBorrowFirst
        },
        {
          icon: 'm10.png',
          components: PageBookAuthor
        },
        {
          icon: 'm6.png',
          components: PageBorrowMonth
        },
        {
          icon: 'm4.png',
          components: PageBorrowWeek
        },
        {
          icon: 'm7.png',
          components: PagePrice
        },
        {
          icon: 'm9.png',
          components: PageLoveClassify
        },
        {
          icon: 'm11.png',
          components: PageReadRank
        },
        {
          icon: 'm8.png',
          components: PageRecommend
        },
        {
          icon: 'm3.png',
          components: PageLast
        }
      ],
      coverData: null,
      reportData: null,
      glc: '',
      year: 0,

      isPlay: null,
      musicsrc: require('@/assets/music/bgm.mp3')
    }
  },
  mounted () {
    this.search()
    this.$nextTick(() => {
      this.initSwiper()
    })
  },
  methods: {
    initSwiper () {
      const that = this
      this.thumbSwiper = new Swiper('.swiper-thumbs', {
        slidesPerView: 5,
        spaceBetween: 0,
        direction: 'horizontal',
        freeMode: true,
        watchSlidesProgress: true
      })
      this.mySwiper = new Swiper('.swiper-father-container', {
        // direction: 'horizontal',
        effect: 'fade',
        observer: true,
        observeParents: true,
        noSwiping: true,
        noSwipingClass: 'stop-swiping',
        thumbs: {
          swiper: this.thumbSwiper
        },
        on: {
          slideChange: function () {
            that.pageIndex = this.activeIndex
            if (that.pageIndex === 1 && that.isPlay === null) {
              const audio = document.getElementById('musicBg')
              audio.play()
              that.isPlay = true
            }
          }
        }
      })
    },
    search () {
      this.loading = true
      const query = this.$route.query
      const rdid = query.rdid
      const refId = query.refId
      const code = query.code
      let url = `/xiangzhou-report/report/readerInfo?rdid=${rdid}`
      if (refId) {
        url += `&refId=${refId}`
      }
      if (code) {
        url += `&code=${code}`
      }
      $http.get(url)
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            const resData = res.data
            this.coverData = resData.reportConfig
            this.reportData = resData.readerData
            this.glc = resData.glc
            this.year = resData.reportConfig.yearNum
          } else {
            this.$router.push({
              path: '/noneDate',
              query: {
                msg: res.message
              }
            })
          }
        })
        .catch(() => {
          this.loading = false
          this.$router.push({
            path: '/noneDate',
            query: {
              msg: '请求失败，请稍后重试'
            }
          })
        })
    },
    handlePage (event) {
      const w = window.innerWidth / 2
      const x = event.clientX
      const direction = x <= w ? 'left' : 'right'
      if (direction === 'left' && this.pageIndex > 0) {
        this.mySwiper.slidePrev()
      }
      if (direction === 'right' && this.pageIndex < this.menuList.length - 1) {
        this.mySwiper.slideNext()
      }
    },
    musicControl () {
      const _this = this
      const audio = document.getElementById('musicBg')
      if (audio.paused) {
        audio.play()
        _this.isPlay = true
      } else {
        audio.pause()
        _this.isPlay = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.swiper-father-container {
  .swiper-slide-active {
    z-index: 9;
  }
}
.swiper-thumbs {
  width: 950px;
  position: fixed;
  left: 0;
  top: calc(50% + 564px + 47px);
  z-index: 999;
  &.page-cover {
    z-index: -1;
  }
  .thumbs-icon {
    width: 146px;
    height: 146px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: relative;
    img {
      width: 64px;
      height: 64px;
      opacity: 0.7;
    }
  }
  .swiper-slide-thumb-active.swiper-slide-thumb {
    .thumbs-icon {
      background: rgba(0, 0, 0, 0.1);
      border: 4px solid rgba(255, 255, 255, 0.3);
      img {
        opacity: 1;
      }
      &::before {
        content: '';
        width: 24px;
        height: 80px;
        background: url('~@/assets/images/m-icon.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: calc(50% - 12px);
        top: -80px;
      }
    }
  }
}

.autoplay {
  width: 100px;
  height: 100px;
  background: url('~@/assets/images/icon_music.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 40px;
  top: 40px;
  z-index: 99;
}

.rotate {
  animation: rotate linear 5s infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
